import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SideNavButton extends Component {
  constructor(props) {
    super(props);
    this.toggleClick = this.toggleClick.bind(this);
  }

  toggleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    this.props.onClick();
  }

  render() {
    const { sidebarVisibility } = this.props;
    const className = sidebarVisibility ? 'side-nav-btn open' : 'side-nav-btn';
    return (
      <button className={className} onClick={this.toggleClick}>
        <div className="three-bar">
          <div className="bar" />
          <div className="bar" />
          <div className="bar" />
        </div>
      </button>
    );
  }
}

SideNavButton.propTypes = {
  sidebarVisibility: PropTypes.bool,
  onClick: PropTypes.func,
};

export default SideNavButton;
